<template>
  <a-spin :spinning="spinning">
    <a-card :bordered="false">
      <a-card title="" style="width: 32%;">
        <a-row :gutter="24">
          <a-col :xl="8" :lg="24" :md="24" :sm="24">
            <j-upload-oss fileType="image" bizPath="product" :number="1" v-model="queryParam.imageUrl" @change="getList"></j-upload-oss>
          </a-col>
          <a-col :xl="16" :lg="24" :md="24" :sm="24">
            <div>
              <a-select placeholder="产品状态" style="width: calc(50% - 4px);" v-model="queryParam.productStatus" @change="getList" allowClear>
                <a-select-option :value="1">上架(完成)</a-select-option>
                <a-select-option :value="2">停产下架(下架)</a-select-option>
              </a-select>
              <a-tree-select
                allowClear
                @change="getList"
                v-model="queryParam.categoryId"
                :replaceFields="replaceFields"
                :filterTreeNode="filterTreeNode"
                show-search
                style="width: calc(50% - 4px); margin-left: 8px;"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                placeholder="请选择产品类目"
                tree-default-expand-all
                :getPopupContainer="node => node.parentNode"
              >
              </a-tree-select>
            </div>
            <div style="margin-top: 40px; display: flex; justify-content: flex-end;" v-if="searchList && searchList.length">
              <a-button @click="handleCheckAll">全选</a-button>
              <a-button style="margin-left: 8px;" @click="handleReverse">反选</a-button>
              <a-button class="copy" type="primary" style="margin-left: 8px;" @click="handleCopy" v-if="checkedList && checkedList.length">复制</a-button>
            </div>
          </a-col>
        </a-row>
      </a-card>
      <div v-if="searchList && searchList.length" class="img-content">
        <a-checkbox-group v-model="checkedList">
          <a-checkbox :value="item.id" v-for="(item, index) in searchList" :key="index">
            <a-card title="">
              <a-row :gutter="24">
                <a-col :xl="8" :lg="24" :md="24" :sm="24">
                  <img :src="item.imageUrl" style="width: 100px;height: 100px;object-fit: cover;">
                </a-col>
                <a-col :xl="16" :lg="24" :md="24" :sm="24" class="search-content">
                  <div>
                    <span style="color: #1890FF;font-weight: 700;">{{ item.code }}</span>
                    <span>金义仓</span>
                  </div>
                  <div>
                    <span v-if="item.title">{{ item.title }}</span>
                    <span v-if="item.name">{{ item.name }}</span>
                  </div>
                  <div v-if="item.createBy">开发：{{ item.createBy }}</div>
                  <div v-if="item.buyer">采购：{{ item.buyer }}</div>
                  <div style="margin-bottom: 4px;">
                    <span>相似度：{{ (item.score * 100).toFixed(2) }}%</span>
                  </div>
                  <div>
                    <span v-for="(item_, index_) in item.tagList" :key="index_">
                      <a-tag color="green" v-if="item_.type === 2" style="margin-top: 4px;">{{ item_.name }}</a-tag>
                      <a-tag color="red" v-if="item_.type === 1" style="margin-top: 4px;">{{ item_.name }}</a-tag>
                    </span>
                  </div>
                  <a-tag color="#1890FF" v-if="item.itemType === '1'">占坑</a-tag>
                </a-col>
              </a-row>
            </a-card>
          </a-checkbox>
        </a-checkbox-group>
        <a-pagination size="small" :defaultPageSize="ipagination.pageSize" :pageSizeOptions="ipagination.pageSizeOptions" :total="ipagination.total" :show-total="ipagination.showTotal" show-size-changer @showSizeChange="onShowSizeChange" @change="handleChange" style="text-align: right;" />
      </div>
      <div v-if="!(searchList && searchList.length) && !spinning" style="margin-top: 20px;">
        <a-empty description="暂无数据" />
      </div>
    </a-card>
  </a-spin>
</template>

<script>
import { productMixins } from '@/views/productLibrary/mixins/productMixins'
import { getAction } from '@/api/manage'
export default {
  mixins:[ productMixins ],
  data(){
    return {
      spinning: false,
      queryParam: {},
      searchList: [],
      checkedList: [],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 20,
        pageSizeOptions: ['10', '20', '30','50','100'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        list: "/hzkj-product/product/productLibrary/image/search/list"
      }
    }
  },
  created() {
    this.loadData_('', 'queryMyCategory');
    if(this.$route.query.params){
      this.queryParam = JSON.parse(decodeURIComponent(this.$route.query.params));
      this.getList();
    }
  },
  methods: {
    getList(){
      if(!this.queryParam.imageUrl){
        this.searchList = [];
        return;
      }
      let params = {
        ...this.queryParam,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize
      }
      this.spinning = true;
      getAction(this.url.list, params).then((res) => {
        if(res.success){
          this.searchList = res.result && res.result.records || [];
          this.ipagination.total = res.result.total;
        }else{
          this.$message.warning(res.message);
        }
      }).finally(() => {
        this.spinning = false;
      })
    },
    handleCheckAll(){
      this.checkedList = this.searchList.map(item => item.id);
    },
    handleReverse(){
      let checkedList = this.searchList.filter(item => this.checkedList.indexOf(item.id) === -1);
      this.checkedList = checkedList.map(item => item.id);
    },
    handleCopy(){
      let copyText = this.searchList.filter(item => this.checkedList.indexOf(item.id) > -1);
      copyText = copyText.map(item => item.code);
      copyText = copyText.join(',');
      const textarea = document.createElement('textarea');
      textarea.value = copyText;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      this.$message.success('复制成功！');
    },
    onShowSizeChange(current, pageSize) {
      this.ipagination.current = current;
      this.ipagination.pageSize = pageSize;
      this.getList();
    },
    handleChange(current, pageSize) {
      this.ipagination.current = current;
      this.ipagination.pageSize = pageSize;
      this.getList();
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-checkbox-wrapper{
  position: relative;
  .ant-checkbox{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
  }
}
.search-content{
  font-size: 12px;
  &>div:nth-child(1){
    display: flex;
    justify-content: space-between;
  }
  &>div{
    span:nth-child(1){
      margin-right: 10px;
    }
  }
}
.img-content{
  /deep/.ant-checkbox-group{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .ant-checkbox-wrapper{
      width: calc((100% - 48px) / 3);
      margin: 24px 0 0 24px;
      &>span:nth-child(2){
        width: 100%;
        height: 100%;
        padding: 0;
        display: inline-block;
        .ant-card{
          height: 100%;
        }
      }
    }
    .ant-checkbox-wrapper:nth-child(3n + 1){
      margin-left: 0;
    }
  }
}
</style>